<template>
  <div>

	<myheader></myheader>


	<section class="featured-block text-center">
		<div class="container">

			<div>

				<Breadcrumb :datas='datas'></Breadcrumb>

			</div>
			<div>

				<table>
					<tr>

						<td>

							用户名:
						</td>
						<td>

							<input type="text" v-model="username" placeholder="请输入用户名">
						</td>


					</tr>
					<tr>

						<td>

							密码:
						</td>
						<td>

							<input type="password" v-model="password">
						</td>


					</tr>
					<tr>

						<td>

							手机号:
						</td>
						<td>

							<input type="text" v-model="phone">
						</td>


					</tr>
					<tr>
						<td></td>
						<td>
							<Button @click="submit" color="blue">提交</Button>
							<Button @click="reginfo" color="red">重置</Button>
						</td>
				
							
					

					</tr>
			
				
				</table>


			</div>



		</div>
	</section>


	<myfooter></myfooter>




  </div>

</template>



<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //表单数据
	  username:'',
	  password:'',
	  phone:'',
	  //面包屑导航变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}]
    }
  },
  //注册组件标签
  components:{
	  'myheader':myheader,
	  'myfooter':myfooter,
  },
  mounted:function(){



},
  methods:{

	  //重置按钮
	  reginfo:function(){
		  this.username = "";
		  this.password = "";
		  this.phone = "";

	  },

	  //定义提交事件
	  submit:function(){

		  //非空验证
		  if(this.username== ''){

			  this.$Message('您没有输入用户名')
			  return false
		  }
		  if(this.password==''){
			  this.$Message('密码不能为空')
			  return false
		  }
		  if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.phone)) {
                alert('手机号格式不正确');
                return false;
              }


		  //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/register/',{params:{username:this.username,password:this.password,password2:this.password,phone:this.phone}}).then((result)=>{



			  console.log(result);
        this.$Message(result.data.message)



		  })

	  }


  }
}


</script>

<style>

td{
	padding:10px
}


</style>
